<template>
	<div class="main">
		<div class="swiper1 swiper">
		  <div class="swiper-wrapper">
		    <div class="swiper-slide" v-for="item in lists" :key="item.id">
				<div class="icon-item">
					<div class="img">
						<img :src="require('@/'+item.src)" >
					</div>
					<label>{{item.name}}</label>
				</div>
			</div>
		  </div>
		</div>
	</div>
</template>

<script>
	//引入vue周期函数
	import {onMounted} from 'vue';
	import Swiper from 'swiper';
	// //swiper组件应用配置
	export default {
		name:'Slide',
		data(){
			return {
				lists:[
					{id:1, name:"景点导航",src:'assets/icon/slide01.png'},
					{id:2, name:"购物",src:'assets/icon/slide02.png'},
					{id:3, name:"经典打卡",src:'assets/icon/slide03.png'},
					{id:4, name:"美食",src:'assets/icon/slide04.png'},
					{id:5, name:"猫眼影院",src:'assets/icon/slide05.png'},
					{id:6, name:"攻略",src:'assets/icon/slide06.png'},
					{id:7, name:"风情民宿",src:'assets/icon/slide07.png'},
					{id:8, name:"景点导航",src:'assets/icon/slide08.png'},
					{id:9, name:"收藏",src:'assets/icon/slide09.png'},
					{id:10, name:"旅游贷",src:'assets/icon/slide10.png'},
					{id:11, name:"租车服务",src:'assets/icon/slide11.png'},
					{id:12, name:"驴友",src:'assets/icon/slide12.png'},
				]
			}
		},
		//设置应用swiper的位置以及具体操作
		setup(){
			onMounted(() => { 
				new Swiper('.swiper1',{
					// loop:true,
					slidesPerView : 5,  
				})
			})
		}
	}
</script>

<style scoped>
	.main{
		width: 100%;
		border-top: 1px solid #ececec;
		padding-top: 0.2rem;
		overflow: hidden;
	}
	.icon-item{
		width: 100%;
		float: left;
		padding: 0 0.3rem;
		flex-direction: column;
		text-align: center;
	}
	.icon-item img{
		width: 50%;
	}
	.icon-item label{
		font-size: 0.03rem;
		line-height: 0.5rem;
	}
	.swiper-slide{
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
